<template>
  <div class="container" :class="theme">
    <slot></slot>
    <div class="component-wrap">
      <div class="datav-box">
        <h4>项目总览</h4>
        <div class="datav-con overview">
          <div class="status-item">
            <div>
              <h5>{{statusNum.tobe}}</h5>
              <p>待建</p>
            </div>
          </div>
          <div class="status-item">
            <div>
              <h5>{{statusNum.under}}</h5>
              <p>在建</p>
            </div>
          </div>
          <div class="status-item">
            <div>
              <h5>{{statusNum.complete}}</h5>
              <p>竣工</p>
            </div>
          </div>
          <div class="status-item">
            <div>
              <h5>{{statusNum.shutdown}}</h5>
              <p>停工</p>
            </div>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="datav-box">
        <h4>劳务概况</h4>
        <div class="datav-con labor labor-box">
          <div class="labor-item">
            <p>总实名制人数</p>
            <h5>{{personData.tot}} <span>人</span></h5>
          </div>
          <div class="labor-item">
            <p>今日出勤人数</p>
            <h5>{{personData.antendcetot}} <span>人</span></h5>
          </div>
          <div class="labor-item">
            <p>今日出勤率</p>
            <h5>{{personData.rate > 100 ? 100 : personData.rate}} <span>%</span></h5>
          </div>
        </div>
      </div>
      <!-- <div class="line"></div>
      <div class="datav-box">
        <h4>项目质量安全管理</h4>
        <div class="datav-con">
          <Echart id="qs" :options="qsdata" class="qs-chart" ref="qs" />
        </div>
      </div> -->
      <div class="datav-box">
        <h4>设备在线情况</h4>
        <div class="datav-con">
          <div class="labor-box">
            <div class="labor-item">
              <p>视频设备</p>
              <h5><b>{{videoData.online}}</b><span> / {{videoData.total}}</span></h5>
            </div>
            <div class="labor-item">
              <p>实名制设备</p>
              <h5><b>{{attendanceData.online}}</b><span> / {{attendanceData.total}}</span></h5>
            </div>
            <div class="labor-item">
              <p>环境监测设备</p>
              <h5><b>{{dustData.online}}</b><span> / {{dustData.total}}</span></h5>
            </div>
          </div>
          <Echart id="online" :options="onlinedata" class="online-chart" ref="online" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { mapGetters} from "vuex";
export default{
  props:{
    theme:{
      type:String,
      default:''
    }
  },
  computed:{
    ...mapGetters(["projects"])
  },
  data(){
    return{
      statusNum:{
        tobe:0,
        under:0,
        complete:0,
        shutdown:0
      },
      personData:{
        tot:0,
        antendcetot:0,
        rate:0
      },
      videoData:{
        total:0,
        online:0
      },
      attendanceData:{
        total:0,
        online:0
      },
      dustData:{
        total:0,
        online:0
      },
      qsdata:{
        legend: {
          data: ['质量整改', '安全整改'],
          right: '3%',
          textStyle:{
            color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
          }
        },
        grid: {
          top:'15%',
          left: '3%',
          right: '3%',
          bottom: '6%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            type: 'category',
            data: [moment().subtract(5, 'month').format('M月'),moment().subtract(4, 'month').format('M月'),moment().subtract(3, 'month').format('M月'),moment().subtract(2, 'month').format('M月'),moment().subtract(1, 'month').format('M月'),moment().format('M月')],
            axisLabel:{
              color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine:false,
            axisLabel:{
              color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
            }
          }
        ],
        series: [
          {
            name: '质量整改',
            type: 'bar',
            data: [],
          },
          {
            name: '安全整改',
            type: 'bar',
            data: [],
          }
        ]
      },
      onlinedata:{
        title: {
          text: '设备在线率(%)',
          textStyle:{
            color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)',
            fontWeight:'normal',
            fontSize:'15px'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['视频', '实名制','环境监控'],
          right: '3%',
          textStyle:{
            color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
          }
        },
        grid: {
          top:'17%',
          left: '3%',
          right: '4%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [moment().subtract(6, 'days').format('MM-DD'),moment().subtract(6, 'days').format('MM-DD'),moment().subtract(4, 'days').format('MM-DD'),moment().subtract(3, 'days').format('MM-DD'),moment().subtract(2, 'days').format('MM-DD'),moment().subtract(1, 'days').format('MM-DD'),moment().format('MM-DD')],
          axisLabel:{
              color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
            }
        },
        yAxis: {
          type: 'value',
          splitLine:false,
          axisLabel:{
              color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
            }
        },
        series: [
          {
            name: '视频',
            type: 'line',
            smooth: true,
            data: []
          },
          {
            name: '实名制',
            type: 'line',
            smooth: true,
            data: []
          },
          {
            name: '环境监控',
            type: 'line',
            smooth: true,
            data: []
          }
        ]
      }
    }
  },
  watch:{
    projects:{
      handler(v){
        if(v){
          this.getProjectNum()
          this.getPersonView()
          this.getVideoView()
          this.getAttendanceView()
          this.getDustView()
          this.getqsView()
        }
      },
      deep:true,
      immediate:true
    }
  },
  methods: {
    //项目状态统计
    getProjectNum(){
      this.$datav.getProjectNum({projectid:this.projects}).then(res => {
        res.data.map(item => {
          if(item.status == 1) this.statusNum.tobe = item.count
          if(item.status == 2) this.statusNum.under = item.count
          if(item.status == 4) this.statusNum.complete = item.count
          if(item.status == 3) this.statusNum.shutdown = item.count
        })
      })
    },
    //出勤人数
    getPersonView(){
      this.$datav.getPersonView({today:moment().format('YYYY-MM-DD'),projectid:this.projects}).then(res => {
        if(res.code == 0){
          this.personData.tot = res.data.tot
          this.personData.antendcetot = res.data.antendcetot
          this.personData.rate = ((res.data.antendcetot / res.data.tot) * 100).toFixed(2)
        }
      })
    },
    //视频
    getVideoView(){
      this.$datav.getVideoView({start:moment().subtract(6, 'days').format('YYYY-MM-DD'),end:moment().format('YYYY-MM-DD'),projectid:this.projects}).then(res => {
        if(res.code == 0){
          this.videoData.total = res.data.tot
          let arr = []
          res.data.online.map(item => {
            if(item.partitiondate == moment().format('YYYY-MM-DD')) this.videoData.online = item.num
            arr.unshift(Math.floor((item.num * 1 / res.data.tot)*100))
          })
          this.onlinedata.series[0].data = arr
        }
      })
    },
    //实名制
    getAttendanceView(){
      this.$datav.getAttendanceView({start:moment().subtract(6, 'days').format('YYYY-MM-DD'),end:moment().format('YYYY-MM-DD'),projectid:this.projects}).then(res => {
        if(res.code == 0){
          this.attendanceData.total = res.data.tot
          let arr = []
          res.data.online.map(item => {
            if(item.partitiondate == moment().format('YYYY-MM-DD')) this.attendanceData.online = item.num
            arr.unshift(Math.floor((item.num * 1 / res.data.tot)*100))
          })
          this.onlinedata.series[1].data = arr
        }
      })
    },
    //质量安全
    getqsView(){
      this.$datav.getqsView({date:moment().format('YYYY-MM-DD'),projectid:this.projects}).then(res => {
        if(res.code == 0){
          res.data.quality.reverse()
          res.data.safe.reverse()
          this.qsdata.series[0].data = res.data.quality
          this.qsdata.series[1].data = res.data.safe
        }
      })
    },
    //环境
    getDustView(){
      this.$datav.getDustView({start:moment().subtract(6, 'days').format('YYYY-MM-DD'),end:moment().format('YYYY-MM-DD'),projectid:this.projects}).then(res => {
        if(res.code == 0){
          this.dustData.total = res.data.tot
          let arr = []
          res.data.online.map(item => {
            if(item.partitiondate == moment().format('YYYY-MM-DD')) this.dustData.online = item.num
            arr.unshift(Math.floor((item.num * 1 / res.data.tot)*100))
          })
          this.onlinedata.series[2].data = arr
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.container{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 500px;
}
.overview{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .status-item{
    display: flex;
    width:175px;
    height: 80px;
    margin-bottom: 25px;
    position: relative;
    background: url("../../../assets/images/overview-icon-bg2.png") 0 0 no-repeat;
    background-size: 100% 100%;
    padding-left: 30px;
    &::after{
      content: "";
      width: 37px;
      height: 6px;
      background: #F97D00;
      position: absolute;
      right: 0;
      top: 0;
    }
    &:nth-child(1)::after{
      background: #F97D00;
    }
    &:nth-child(2)::after{
      background: #049DE1;
    }
    &:nth-child(3)::after{
      background: #00C876;
    }
    &:nth-child(4)::after{
      background: #D40108;
    }
    div{
      display: flex;
      flex-direction: column;
      color: #fff;
      padding: 6px 0;
      justify-content: center;
      h5{
        font-size: 26px;
        margin: 0 0 4px;
      }
      p{
        font-size: 14px;
        margin: 0;
      }
    }
  }
}
.labor{
  margin-bottom: 25px;
}
.labor-box{
  display: flex;
  .labor-item{
    width: 138px;
    height: 76px;
    padding:0 15px;
    background: rgba(23,34,87,0.85);
    border-radius: 2px 2px 2px 2px;
    border: 1px solid rgba(111,129,214,0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 15px;
    p{
      font-size: 14px;
      color: #fff;
      margin: 0;
    }
    h5{
      font-size: 22px;
      margin: 8px 0 0;
      color: #fff;
      span{
        font-size: 16px;
      }
      b{
        color: #00E98C;
      }
    }
  }
}
.qs-chart{
  height: 240px !important;
}
.online-chart{
  height: 240px !important;
  margin-top: 20px;
}

//浅色
.light{
  .overview{
    .status-item{
      background: url("../../../assets/images/overview-icon-bg1.png") 0 0 no-repeat;
      background-size: 100% 100%;
      div{
        color: #333;
      }
    }
  }
  .labor-box{
      .labor-item{
        background: #fff;
        border: 1px solid rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 15px;
        p{
          font-size: 14px;
          color: #333;
          margin: 0;
        }
        h5{
          font-size: 22px;
          margin: 8px 0 0;
          color: #333;
          span{
            font-size: 16px;
          }
          b{
            color: #00E98C;
          }
        }
      }
    }
}
</style>